html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  box-sizing: border-box;
}
body{
	background: #7F8C97;
	font-family: "Roboto";
	font-size: 14px;
	font-weight: lighter;
}
h1,
h2,
h3,
h4,
h5,
h6{
	margin: 0;
	padding: 0;
}
/* Custom style */
.lighter{
	font-weight: 300;
}
.thin{
	font-weight: 100;
}
.white{
	color: #fff;
}
.gray{
	color: #383931;
}
.b-white{
	background: #fff;
}
.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}
/* Header */
header{
	position: relative;
	background: #3E003E;
	height: 150px;
	z-index: 0;
}
@media(min-width: 768px){
	header{
		height: 300px;
	}
}
header h2{
	position: relative;
	font-size: 72px;
	line-height: 150px;
	z-index: 9;
}
@media(min-width: 768px){
	header h2{
		line-height: 300px;
	}
}
.cloud{
	position: absolute;
	color: #4F004F;
}
.cloud-1{
	top: 20%;
	left: 20%;
	font-size: 7em;
	z-index: 1;
	-webkit-animation: cloud 5s linear 0s infinite alternate;
	        animation: cloud 5s linear 0s infinite alternate;
}
.cloud-2{
	top: 10%;
	left: 70%;
	font-size: 5em;
	z-index: 2;
	-webkit-animation: cloud-2 5s linear 0s infinite alternate;
	        animation: cloud-2 5s linear 0s infinite alternate;
}
.cloud-3{
	top: 70%;
	left: 50%;
	font-size: 3em;
	z-index: 10;
	-webkit-animation: cloud-3 10s linear 0s infinite alternate;
	        animation: cloud-3 10s linear 0s infinite alternate;
}
@media(min-width: 768px){
	.cloud-1{
		font-size: 10em;
	}
	.cloud-2{
		font-size: 8em;
	}
	.cloud-3{
		font-size: 5em;
	}
}
@-webkit-keyframes cloud{
	from{
		        -webkit-transform: translateX(0%);
		                transform: translateX(0%);
	}
	to{
		        -webkit-transform: translateX(-100%);
		                transform: translateX(-100%);
	}
}
@keyframes cloud{
	from{
		        -webkit-transform: translateX(0%);
		                transform: translateX(0%);
	}
	to{
		        -webkit-transform: translateX(-100%);
		                transform: translateX(-100%);
	}
}
@-webkit-keyframes cloud-2{
	from{
		        -webkit-transform: translateX(0%);
		                transform: translateX(0%);
	}
	to{
		        -webkit-transform: translateX(100%);
		                transform: translateX(100%);
	}
}
@keyframes cloud-2{
	from{
		        -webkit-transform: translateX(0%);
		                transform: translateX(0%);
	}
	to{
		        -webkit-transform: translateX(100%);
		                transform: translateX(100%);
	}
}
@-webkit-keyframes cloud-3{
	from{
		        -webkit-transform: translateX(-100%);
		                transform: translateX(-100%);
	}
	to{
		        -webkit-transform: translateX(100%);
		                transform: translateX(100%);
	}
}
@keyframes cloud-3{
	from{
		        -webkit-transform: translateX(-100%);
		                transform: translateX(-100%);
	}
	to{
		        -webkit-transform: translateX(100%);
		                transform: translateX(100%);
	}
}
/* Timeline */
#timeline{
	position: relative;
	height: auto;
	padding-bottom: 30px;
}
#timeline:after{
	position: absolute;
	content: "";
	top: -30px;
	left: 35px;
	width: 4px;
	height: 100%;
	background: #8E9AA4;
	border-radius: 2px;
}
@media(min-width: 600px){
	#timeline:after{
		left: 60px;
	}
}
@media(min-width: 992px){
	#timeline:after{
		left: 50%;
		margin-left: -2px;
	}
}
.timeline-block{
	position: relative;
	margin-top: 30px;
}
.timeline-block:after{
	content: "";
	display: table;
	clear: both;
}
.timeline-block:first-child{
	margin-top: 60px;
}
.timeline-img{
	position: absolute;
	top: 0;
	width: 40px;
	height: 40px;
	left: 15px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px #FFF, 0px 2px 0px rgba(0, 0, 0, 0.08) inset, 0px 3px 0px 4px rgba(0, 0, 0, 0.05);
	z-index: 1;
}
@media(min-width: 600px){
	.timeline-img{
		width: 60px;
		height: 60px;
		left: 30px;
	}
}
@media(min-width: 992px){
	.timeline-img{
		left: 50%;
		margin-left: -30px;
	}
}
.timeline-img img{
	display: block;
	width: 24px;
	height: 24px;
	position: relative;
	left: 50%;
	top: 50%;
	margin-left: -12px;
	margin-top: -12px;
}
.img-picture{
	background: #75CE66;
}
.img-movie{
	background: #C03B44;
}
.img-text{
	background: #F0CA45;
}
.timeline-time{
	color: #fff;
}
.timeline-content{
	position: relative;
	width: 72%;
	background: #FFF;
	border-radius: 5px;
	padding: 20px;
	box-shadow: 0px 3px 0px #D7E4ED;
}
.timeline-content:after{
	position: absolute;
	content: "";
	top: 20px;
	height: 0;
	width: 0;
	border: 7px solid transparent;
}
.timeline-block .timeline-content{
	float: right;
	margin-right: 15px;
}
@media(max-width: 991px){
	.timeline-block:nth-child(odd) .timeline-content:after,
	.timeline-block:nth-child(even) .timeline-content:after{
		left: -14px;
		border-right: 7px solid #fff; 
	}
}
@media(min-width: 480px){
	.timeline-block .timeline-content{
		width: 80%;
	}
}
@media(min-width: 992px){
	.timeline-block .timeline-content{
		width: 40%;
	}
	.timeline-block:nth-child(odd) .timeline-content{
		margin-left: 20px;
		float: left;
	}
	.timeline-block:nth-child(even) .timeline-content{
		margin-right: 20px;
		float: right;
	}
	.timeline-block:nth-child(odd) .timeline-content:after{
		right: -14px;
		border-left: 7px solid #fff; 
	}
	.timeline-block:nth-child(even) .timeline-content:after{
		left: -14px;
		border-right: 7px solid #fff; 
	}
}
@media(min-width: 1200px){
	.timeline-block .timeline-content{
		width: 45%;
	}
}
.timeline-content .title{
	color: #303E49;
	font-size: 28px;
}
.timeline-content .content{
	color: #626455;
}